{$contentClass}
	code
		color lighten($textColor, 20%)
		// color #f99403
		padding 0.25rem 0.5rem
		margin 0
		font-size 0.85em
		// fixed by mehaotian
		background-color rgba(27,31,35,0.05)
		// background-color #fffcf7
		// border-radius 3px
		.token
			&.deleted
				color #EC5975
			&.inserted
				color $accentColor
{$contentClass}
	pre, pre[class*='language-']
		line-height 1.4
		padding 1.25rem 1.5rem
		margin 0.85rem 0
		background-color $codeBgColor
		border-radius 6px
		overflow auto
		code
			// fix by mehaotian 基本着色
			// color #fff
			color #444
			padding 0
			background-color transparent
			border-radius 0
			// fix by mehaotian 关键字着色
			.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
				color #a43aa7
			// fix by mehaotian 字符串着色
			.token.string, .token.char, .token.attr-value, .token.regex, .token.variable
				color #2e9c4e
			// fix by mehaotian tag 着色
			.token.tag, .token.attr-name, .token.namespace, .token.deleted
				color #d22d32
			// fix by mehaotian 符号着色
			.token.punctuation
				color #999
			// fix by mehaotian 操作着色
			.token.operator, .token.entity, .token.url
				color #d22d32
div[class*='language-']
	position relative
	// fix by mehaotian 代码块背景着色
	background-color $codeBgColor
	// background-color #F5F5F5
	border-radius 6px
	.highlight-lines
		user-select none
		padding-top 1.3rem
		position absolute
		top 0
		left 0
		width 100%
		line-height 1.4
		.highlighted
			// fix by mehaotian 高亮着色
			// background-color rgba(0, 0, 0, 66%)
			background-color #eee
	pre, pre[class*='language-']
		background transparent
		position relative
		z-index 1
	&::before
		position absolute
		z-index 3
		top 0.8em
		right 1em
		font-size 0.75rem
		// fix by mehaotian
		// color rgba(255, 255, 255, 0.4)
		color #999
	&:not(.line-numbers-mode)
		.line-numbers-wrapper
			display none
	&.line-numbers-mode
		.highlight-lines .highlighted
			position relative
			&:before
				content ' '
				position absolute
				z-index 3
				left 0
				top 0
				display block
				width $lineNumbersWrapperWidth
				height 100%
				background-color rgba(0, 0, 0, 66%)
		pre
			padding-left ($lineNumbersWrapperWidth + 1) rem
			vertical-align middle
		.line-numbers-wrapper
			position absolute
			top 0
			width $lineNumbersWrapperWidth
			text-align center
			color rgba(255, 255, 255, 0.3)
			padding 1.25rem 0
			line-height 1.4
			br
				user-select none
			.line-number
				position relative
				z-index 4
				user-select none
				font-size 0.85em
		&::after
			content ''
			position absolute
			z-index 2
			top 0
			left 0
			width $lineNumbersWrapperWidth
			height 100%
			border-radius 6px 0 0 6px
			border-right 1px solid rgba(0, 0, 0, 66%)
			background-color $codeBgColor
for lang in $codeLang
	div{'[class~="language-' + lang + '"]'}
		&:before
			content '' + lang
div[class~='language-javascript']
	&:before
		content 'js'
div[class~='language-typescript']
	&:before
		content 'ts'
div[class~='language-markup']
	&:before
		content 'html'
div[class~='language-markdown']
	&:before
		content 'md'
div[class~='language-json']:before
	content 'json'
div[class~='language-ruby']:before
	content 'rb'
div[class~='language-python']:before
	content 'py'
div[class~='language-bash']:before
	content 'sh'
div[class~='language-php']:before
	content 'php'
// fix by mehaotian
div.md-styles-box
	margin: 0.85rem 0;
	border-radius 5px
	box-shadow 0 0 8px 1px rgba(0,0,0,0.15)
	overflow hidden
	background-color #fff
	.md-box-header
		display flex
		align-items flex-end
		padding-left 10px
		height 26px
		.md-box-header-item
			margin-left 8px
			width 12px
			height 12px
			border-radius 50%
			background-color #999
			&:nth-child(1){
				background-color #f16e5a
			}
			&:nth-child(2){
				background-color #f5c147
			}
			&:nth-child(3){
				background-color #4ccb4a
			}
	pre[class*='language-']
		margin 0

@import '~prismjs/themes/prism-tomorrow.css'
